<template>
  <div class="edit-page">
    <!-- 导航栏 -->
    <van-nav-bar
      title="编辑资料"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 个人资料项 -->
    <van-cell-group>
      <van-cell title="头像" is-link center>
        <!-- 头像 -->
        <div class="avatar">
          <van-image
            width="50"
            height="50"
            round
            fit="cover"
            :src="info.photo"
          />
          <input type="file" class="selectAvatar" @change="changefile" />
        </div>
      </van-cell>
      <van-cell
        title="名称"
        :value="info.name"
        is-link
        @click="showNameDialog = true"
      />
      <van-cell
        title="性别"
        :value="info.gender === 0 ? '男' : '女'"
        is-link
        @click="showSexDialog = true"
      />
      <van-cell
        title="生日"
        :value="info.birthday"
        is-link
        @click="showBirthday = true"
      />
    </van-cell-group>
    <!-- 编辑名称的弹层 -->
    <van-dialog
      v-model="showNameDialog"
      title="请输入姓名"
      show-cancel-button
      @confirm="sureName"
      @cancel="userName = ''"
    >
      <van-field
        v-model.trim="userName"
        label="用户名"
        placeholder="请输入用户名"
      />
    </van-dialog>
    <!-- 编辑性别的弹层 -->
    <van-popup
      v-model="showSexDialog"
      round
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        v-if="showSexDialog"
        title="性别"
        show-toolbar
        :columns="columns"
        @confirm="sexConfirm"
        @cancel="sexCancel"
      />
    </van-popup>
    <!-- 编辑生日的弹层 -->
    <van-popup
      v-model="showBirthday"
      round
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="sureDate"
        @cancel="cancelDate"
      />
    </van-popup>
  </div>
</template>
<script>
// 引入编辑用户基本资料的接口
import { getBaseInfo, editBaseInfo, editAvatar } from "@/api/user.js";
// 引入时间格式化文件
import { getFormatTime } from "@/utils/dayjs.js";
export default {
  data() {
    return {
      info: {}, //基本信息
      showNameDialog: false, //编辑姓名的弹层
      userName: "", //用户名
      showSexDialog: false, //修改性别的弹层
      columns: ["男", "女"],
      defaultShow: 0, //选择器的默认选择状态
      showBirthday: false, //生日弹层
      minDate: new Date(1900, 0, 1), //最早的日期
      maxDate: new Date(2020, 8, 1), //最近的日期
      currentDate: new Date(1970, 0, 1) //当前默认选择的日期
    };
  },
  methods: {
    // 格式年月日
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      }
      return `${val}日`;
    },
    //更改用户头像
    async changefile(e) {
      // console.log(e.target.files[0],"文件上传");
      let files = e.target.files[0];
      // 判断上传图片的类型
      if (!files) {
        this.$toast("请先选择图片");
        return;
      }
      if (!files.type.startsWith("image/")) {
        this.$toast("图片格式不正确");
        return;
      }
      let fd = new FormData();
      // console.log(fd);
      fd.append("photo", files);
      // 调接口上传新头像
      try {
        const res = await editAvatar(fd);
        // console.log(res,"头像");
        // 成功之后，修改本地的头像
        this.info.photo = res.data.data.photo;
        // 把修改之后的头像在vuex中更新
        this.$store.commit("saveAvatar", res.data.data.photo);
      } catch (err) {
        console.log(err);
        // 失败提示
        this.$toast("获取基本信息失败");
      }
    },
    //获取基本信息
    async getUserBase() {
      try {
        const res = await getBaseInfo();
        // console.log(res,"基本信息");
        this.info = res.data.data;
      } catch (err) {
        console.log(err);
        this.$toast("获取基本信息失败");
      }
    },
    // 点击确认修改用户名
    async sureName() {
      // 获取输入框的内容
      const userName = this.userName;
      // 判断是否为空
      if (!userName) {
        this.$toast("用户名不能为空");
        return;
      } else if (this.info.name === userName) {
        this.$toast("用户名重复");
        // 清空输入框的值
        this.userName = "";
        return;
      }
      // 调接口
      try {
        const res = await editBaseInfo({
          name: userName
        });
        // console.log(res);
        // 成功修改本地的用户名
        this.info.name = res.data.data.name;
        // 不用关闭弹层，点击确认按钮时组件自己关闭
      } catch (err) {
        console.log(err);
        this.$toast("修改用户名失败");
      }
      // 清空输入框的值
      this.userName = "";
    },
    // 确认性别
    async sexConfirm(gender, index) {
      // console.log(gender,index);
      // 调接口
      try {
        await editBaseInfo({
          gender: index
        });
        // console.log(res,"性别");
        // 成功修改本地的性别
        this.info.gender = index;
      } catch (err) {
        console.log(err);
        // 失败提示失败
        this.$toast("修该姓别失败");
      }
      console.log(this.defaultShow);
      // 关闭弹层
      this.showSexDialog = false;
    },
    // 取消性别修改
    sexCancel() {
      // 关闭弹层
      this.showSexDialog = false;
    },
    // 确认生日
    async sureDate(value) {
      //console.log(value); //Fri Jun 04 1976 00:00:00 GMT+0800 (中国标准时间)
      // 格式时间
      let time = getFormatTime(value);
      // console.log(time); //1970-11-01
      // 调接口修改日期
      try {
        const res = await editBaseInfo({
          birthday: time
        });
        // console.log(res);
        // 修改本地日期
        this.info.birthday = res.data.data.birthday;
      } catch (err) {
        console.log(err);
        this.$toast("修该生日失败");
      }
      // 恢复到最初的日期状态
      this.currentDate = new Date(1970, 0, 1);
      // 关闭弹层
      this.showBirthday = false;
    },
    // 取消生日选择
    cancelDate() {
      // 恢复默认的日期
      this.currentDate = new Date(1970, 0, 1);
      // 关闭弹层
      this.showBirthday = false;
    }
  },
  mounted() {
    this.getUserBase();
  }
};
</script>
<style lang="less" scoped>
.edit-page {
  .avatar {
    position: relative;
    .selectAvatar {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      opacity: 0; //透明度
    }
  }
  /deep/.van-nav-bar {
    background-color: #1989fa;
    .van-nav-bar__title {
      color: #ffffff;
    }
    .van-icon {
      color: #ffffff;
      vertical-align: middle;
    }
  }
}
</style>
